Marcos con CSS3

157 x 157

Esto que vemos es un marco que utilizaremos para enmarcar algunas imágenes o contenido. Lo podemos crear con algún editor de imágenes y lo único necesario es que nuestro marco tenga el fondo transparente para que poder visualizar ese fondo que deseamos mostrar.

Una vez tenemos nuestro marco nos situamos justo antes de ]]></b:skin> y añadimos los estilos para el marco:

.imageborder{

border-width: 25px 30px;

-moz-border-image: url(URL-IMAGEN-MARCO) 25 30 stretch;

-webkit-border-image: url(URL-IMAGEN-MARCO) 25 30 stretch;

-o-border-image: url(URL-IMAGEN-MARCO) 25 30 stretch;

-ms-border-image: url(URL-IMAGEN-MARCO) 25 30 stretch;

border-image: url(URL-IMAGEN-MARCO) 25 30 stretch;

}

Donde URL-IMAGEN-MARCO añadimos la url de nuestra imagen que podemos conseguirla subiendola a una entrada cualquiera o a nuestro álbum de Picasa,  luego nos dirigimos a la entrada o sitio que añadiremos el marco y escribimos lo siguiente:

<div class="imageborder" style="width:420px;height:300px;background:url (URL-IMAGEN-A- MOSTRAR) center center no-repeat">

</div>

En URL-IMAGEN-A-MOSTRAR es el lugar para añadir la url de la imagen que será enmarcada.

Con width establecemos la anchura de ese  marco y con height la altura de esa forma podemos adaptar el marco a la medida de la imagen.

<div class="imageborder" style="width:200px;height:160px;background:url (URL-IMAGEN-A-MOSTRAR) center center no-repeat"></div> 

Si en lugar de mostrar una imagen queremos mostrar contenido lo que hacemos es sustituir el código de la imagen por el contenido a añadir:

<div class="imageborder" style="width:50%;min-height:150px"> AQUÍ EL CONTENIDO </div> 

Puede visualizarse en todos los navegadores excepto IE (como de IE9)

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

REFERENCIA:Dynamic Drive